<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <title>学生信息管理系统</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/admin.css">
  <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
  <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
  <script src="${pageContext.request.contextPath}/layui/common.js"></script>

</head>
<body>
<form class="layui-form layui-top-win" lay-filter="user">
  <!-- form 表单默认支持的校验类型有：
    required（必填项）
    phone（手机号）
    email（邮箱）
    url（网址）
    number（数字）
    date（日期）
    identity（身份证）

    form.verify({
       // 自定义校验规则 value：表单的值、item：表单的DOM对象
      username: function(value, item){
      },
      // 支持数组的形式 , 数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
      password: [ /^[\S]{6,12}$/ ,'密码必须6到12位，且不能出现空格']
    })
   -->
  <div class="layui-form-item">

    <div class="layui-form-item">
      <label class="layui-form-label">学号</label>
      <div class="layui-input-block">
        <input type="text" name="id" placeholder="请输入学号" value="${student.id}" readonly
               lay-verify="required|sno" autocomplete="off" class="layui-input">
      </div>
    </div>

    <label class="layui-form-label">真实名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" placeholder="请输入真实姓名" id="name"
             lay-verify="required" value="${student.name}"
             autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" <c:if test="${student.sex == '男'}"> checked</c:if> >
      <input type="radio" name="sex" value="女" title="女" <c:if test="${student.sex == '女'}"> checked</c:if> >
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">出生日期</label>
    <div class="layui-input-block">
      <input type="text" name="birthday" id="birthday" placeholder="请输入出生日期"
             value="${student.birthday}" class="layui-input" lay-verify="required|date" autocomplete="off">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">专业</label>
    <div class="layui-input-block">
      <input type="text" name="major" value="${student.major}" placeholder="请输入专业名称" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">班级</label>
    <div class="layui-input-block">
      <input type="text" name="className" value="${student.className}" placeholder="请输入班级名称" autocomplete="off" class="layui-input">
    </div>
  </div>

</form>

<script>

  layui.use(['form', 'laydate'], function() {
    let form = layui.form ;
    let $ = layui.jquery ;
    let laydate = layui.laydate;
    //执行一个laydate实例
    laydate.render({elem: '#birthday'});
    form.verify({
      // 支持数组的形式 , 数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
      sno: [ /^\d{6,18}$/ ,'学号纯数字组成、且长度在 6 ~ 18 位']
    })
    form.on('submit', function(data){
      axios.post("/student/modify/${student.id}", data.field).then(ret=> {
         if (ret.data.status) {
           // 刷新父组件的表格
           parent.layui.table.reload("job")
           parent.layer.msg("学生信息修改成功")
           // 关闭父组件的弹出层
           parent.layer.close(parent.layer.getFrameIndex(window.name));
         }else if (ret.data.code === 20000) {
           // 获取错误消息
           for (let key in ret.data.error) {
             layer.msg(ret.data.error[key])
           }
         }
      })
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
  });
</script>
</body>
</html>
